<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<!--检索组件-->
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">书名</label>
							<div class="layui-input-inline">
								<input type="text" name="bookname" id="select_bookname" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">ISBN</label>
							<div class="layui-input-inline">
								<input type="text" name="isbn" id="select_isbn" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">作者</label>
							<div class="layui-input-inline">
								<input type="text" name="author" id="select_author" placeholder="" class="layui-input">
							</div>
						</div>

<!--						<div class="layui-form-item layui-inline">-->
<!--							<label class="layui-form-label">状态</label>-->
<!--							<div class="layui-input-inline">-->
<!--								<select  name="statistic" id="select_statistic" placeholder="" class="layui-input">-->
<!--									<option value="0">有库存</option>-->
<!--									<option value="1">已借出</option>-->
<!--									</select>-->
<!--							</div>-->
<!--						</div>-->

						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!--信息显示表格组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="user-table" lay-filter="user-table"></table>
			</div>
		</div>
		<!--添加、修改表单组件-->
		<div style="display: none" id="bookForm">
			<form class="layui-form" action="">
				<input type="hidden" name="bookid" id="bookid">
				<div class="mainBox">
					<div class="main-container">
						<div class="main-container">
							<div class="layui-form-item">
								<label class="layui-form-label">书名</label>
								<div class="layui-input-block">
									<input type="text" name="bookname" id="bookname" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">ISBN</label>
								<div class="layui-input-block">
									<input type="text"  name="isbn" id="isbn" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">出版社</label>
								<div class="layui-input-block">
									<input type="text"  name="press" id="press" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">作者</label>
								<div class="layui-input-block">
									<input type="text"  name="author" id="author" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">总数</label>
								<div class="layui-input-block">
									<input type="text"  name="number" id="number" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">剩余数量</label>
								<div class="layui-input-block">
									<input type="text"  name="surplus" id="surplus" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">类别</label>
								<div class="layui-input-block">
									<select name="categoryId" id="categoryId" >
										<option value="1"> 计算机类</option>
										<option value="2"> 文史类</option>
										<option value="3"> 社科类</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">位置</label>
								<div class="layui-input-block">
									<select id="vailbookId" name="vailbookId">
										<option value="1"> 2馆1号架</option>
										<option value="2"> 2馆2号架</option>
										<option value="3"> 3馆1号架</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="button-container">
						<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="book-submit">
							<i class="layui-icon layui-icon-ok"></i>
							提交
						</button>
						<button type="reset" class="pear-btn pear-btn-sm">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div>

		<!--新增，批量删除组件-->
		<script type="text/html" id="user-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>
		        添加新书
		    </button>
		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		        <i class="layui-icon layui-icon-delete"></i>
		        批量删除
		    </button>
		</script>
<!--修改删除组件-->
		<script type="text/html" id="user-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>

		<script type="text/html" id="user-createTime">
			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
		</script>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery','common'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
				let MODULE_PATH = "operate/";
				let cols = [
					[{
						type: 'checkbox'
					},
						{
							title: '书名',
							field: 'bookname',
							align: 'center'
						},
						{
							title: 'ISBN',
							field: 'isbn',
							align: 'center'
						},
						{
							title: '出版社',
							field: 'press',
							align: 'center'
							//templet: '#user-sex'
						},
						{
							title: '类别',
							field: 'categoryId',
							align: 'center',
							templet: leibie
						},
						{
							title: '作者',
							field: 'author',
							align: 'center'
						},
						{
							title: '位置信息',
							field: 'vailbookId',
							align: 'center',
							templet: place
						},
						{
							title: '总数量',
							field: 'number',
							align: 'center'
						},
						{
							title: '剩余数量',
							field: 'surplus',
							align: 'center'
						},
						{
							title: '操作',
							toolbar: '#user-bar',
							align: 'center'
						}
					]
				]

				function leibie(d) {
					let str;
					if (d.categoryId == 1) {
						str = '计算机类';
					} else if (d.categoryId == 2) {
						str = '文史类';
					} else if (d.categoryId == 3) {
						str = '社科类';
					}
					return str;
				}

				function place(d) {
					let str;
					if (d.vailbookId == 1) {
						str = '2馆1号架';
					} else if (d.vailbookId == 2) {
						str = '2馆2号架';
					} else if (d.vailbookId == 3) {
						str = '3馆1号架';
					}
					return str;
				}


				table.render({
					elem: '#user-table',
					url: 'http://47.93.226.229/getAllBook',
					page: true,
					cols: cols,
					limit: 2,
					limits: [2, 4, 6, 8],
					skin: 'line',
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
				});

				table.on('tool(user-table)', function(obj) {
					if (obj.event === 'remove') {
						window.remove(obj);
					} else if (obj.event === 'edit') {
						window.edit(obj);
					}
				});


				table.on('toolbar(user-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});

				form.on('submit(user-query)', function (data) {
					data.field.page = 1;
					data.field.limit = 5;
					$.ajax({
						url: 'http://47.93.226.229/getAllBook',
						data: data.field,//data，规定要发送服务器的数据
						type: "GET",//规定请求的类型
						dataType: "json",//预期服务器相应的类型
						success: function (a) {
							table.reload('user-table', {
								where: {
									bookname: $("#select_bookname").val(),
									isbn: $("#select_isbn").val(),
									author: $("#select_author").val(),
								}, page: {
									curr: 1 //重新从第 1 页开始
								}
							})
						}
					});
					return false;
				});

				form.on('switch(user-enable)', function(obj) {
					layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
				});


				let index = 0;
				window.add = function() {
                    index = layer.open({
                        type: 1,
                        title: '新增图书',
                        area: ['500px', '600px'],
                        content: $('#bookForm')
                    });
                    form.on('submit(book-submit)', function(data){
                        //校验数据
                        //提交数据
                        $.post(
                                'http://47.93.226.229/addBook',
                                data.field,
                                function(msg){
                                    layer.close(index);//关闭当前页
                                    table.reload("user-table");
                                }
                        );
                        // return false;
                    });
				}

				window.edit = function(obj) {
					let data = obj.data; //获得当前行数据
					$.get(
							'http://47.93.226.229/selectBook' + data.bookid, function (obj1) {
								index = layer.open({
									type: 1,
									title: '修改用户',
									area: ['500px', '600px'],
									content: $('#bookForm'),//注意，如果str是object，那么需要字符拼接。
								});
								content: $("#bookid").val(obj1.data.book.bookid);
								content: $("#bookname").val(obj1.data.book.bookname);
								content: $("#isbn").val(obj1.data.book.isbn);
								content: $("#press").val(obj1.data.book.press);
								content: $("#author").val(obj1.data.book.author);
								content: $("#number").val(obj1.data.book.number);
								content: $("#surplus").val(obj1.data.book.surplus);
								content: $("#categoryId").val(obj1.data.book.categoryId);
								content:$("#vailbookId").val(obj1.data.book.vailbookId)
								form.render();
							});
                    form.on('submit(book-submit)', function(data){
                        //提交数据
                        $.post(
                                'http://47.93.226.229//updateBookWithId',
                                data.field,
                                function(msg){
                                    console.log('success');
                                    layer.close(index);//关闭当前页
                                    table.reload("user-table");
                                }
                        );
                    });
				};

				window.remove = function(obj) {
					let data = obj.data //获得当前行数据
					let arr = new Array();
					arr.push(data.bookid);
					layer.confirm('确定要删除该图书', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: 'http://47.93.226.229/DeleteBookByids',
							data: {"ids": arr},//data，规定要发送服务器的数据
							dataType: 'json',
							traditional: true,
							type: "GET",//规定请求的类型
							success: function (result) {
								layer.close(loading);
								if (result.data > 1) {
									layer.msg(result.msg, {
										icon: 1,
										time: 10
									}, function () {
										obj.del();
									});

								} else {
									layer.msg(result.msg, {
										icon: 2,
										time: 1000
									});
								}

							}

						})
						table.reload("user-table",{
							done: function (res, curr, count) {
								if (curr > 1 && res.data.length === 0) {
									curr = curr - 1;
									table.reload('user-table', {
										page: {
											curr: curr
										},
										where: {
											// username: $("#select_username").val(),
											// sex:$("#select_sex").val(),
											// telephonenumber: $("#select_telephonenumber").val(),
											// account: $("#select_account").val(),
										},
									}, 'data');
								}
							}
						});
					});
				}

				window.batchRemove = function(obj) {
					let checkStatus = table.checkStatus(obj.config.id)
							, data = checkStatus.data; //获取选中的数据
					let arr = new Array();
					for (let i = 0; i < checkStatus.data.length; i++) {
						arr.push(checkStatus.data[i].bookid);
					}
					if (data.length === 0) {
						layer.msg("未选中数据", {
							icon: 3,
							time: 1000
						});
						return false;
					}


					layer.confirm('确定要删除这些图书', {
						icon: 3,
						title: '提示'
					}, function (index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: 'http://47.93.226.229/DeleteBookByids',
							data: {"ids": arr},//data，规定要发送服务器的数据
							dataType: 'json',
							traditional: true,
							type: 'GET',
							success: function (result) {
								layer.close(loading);
								if (result.success) {
									layer.msg(result.msg, {
										icon: 1,
										time: 10
									}, function () {
										obj.del();

									});
								} else {
									layer.msg(result.msg, {
										icon: 2,
										time: 10
									});
								}
							}
						})
						table.reload("user-table",{
							done: function (res, curr, count) {
								if (curr > 1 && res.data.length === 0) {
									curr = curr - 1;
									table.reload('user-table', {
										page: {
											curr: curr
										},
										where: {
											// username: $("#select_username").val(),
											// sex:$("#select_sex").val(),
											// telephonenumber: $("#select_telephonenumber").val(),
											// account: $("#select_account").val(),
										},
									}, 'data');
								}
							}
						});
					});
				}


				window.refresh = function(param) {
					table.reload('user-table');
				}
			})
		</script>
	</body>
</html>
